<html>
<head>
<link rel="stylesheet" type="text/css" href="user-manul.css" />
<title>User Manual - Customer</title>
</head>

<body>
	<div id="navigation_container">
		<div class="l-triangle-top"></div>
		<div class="l-triangle-bottom"></div>
		<div class="rectangle">
			<ul id="navigation">
			  <li class="current"><a href="customer.html">&#10029; Customer</a></li>
			  <li><a href="manager.html">&#10029; Manager</a></li>
			  <li><a href="representative.html">&#10029; Representative</a></li>
			</ul>
		</div>
		<div class="r-triangle-top"></div>
		<div class="r-triangle-bottom"></div>
	</div>
	<div class="mainmain">
		<div class="main">
			<div class="left">
				<h2>Customer Manual Lists</h2>
				<ul>
					<li><a href="#main" class="link-a">Main User Interface</a></li>
					<li><a href="#currentstock" class="link-a">View Current Stocks Holding</a></li>
					<li><a href="#currentpastorder" class="link-a">View Current/Past Orders</a></li>
					<li><a href="#orderdetail" class="link-a">View Order Details</a></li>
					<li><a href="#stocksearch" class="link-a">Stock Search</a></li>
					<li><a href="#stocksearch" class="link-a">How to View Stock's Price history</a></li>
					<li><a href="#stocksearch" class="link-a">How to View Stocks Available of a Particular Type</a></li>
				</ul>
				<img src="rage.jpg"></img>
			</div>
			
			<div class="right">
				<div class="manual-section" id="main">
					<div class="scrtion-header">
						<p class="real-title">
							Customer's Main User Interface
						</p>
					</div>
					<div class="list-content">
						<img src="customer-main.jpg" id="figure-00"></img>
						<p class="figure">Figure 0.0</P>
						<ul class="main-bd">
							<LH>Customer User Interface Breakdown: main</LH>
							<p><b>1</b>: Name of the customer that you currently logged in as.</p>
							<p><b>2</b>: One of the actions that you can perform. Click the button to view the detail report of your account.</p>
							<p><b>3</b>: One of the action you can perform. Click on it to search the stocks.</p>
							<p><b>4</b>: Complete detail of your information.</p>
						</ul>
						
						<img src="customer-account.jpg" id="figure-01"></img>
						<p class="figure">Figure 0.1</P>
						<ul class="main-bd">
							<LH>Customer User Interface Breakdown: accounts</LH>
							<p><b>1</b>: List of all accounts registered under your name.</p>
							<p><b>2</b>: Stock holdings of currently selected account.</p>
							<p><b>3</b>: List of orders of currently selected account.</p>
							<p><b>4</b>: List of order details of currently selected account.</p>
						</ul>
						
						<img src="stock-search.jpg" id="figure-02"></img>
						<p class="figure">Figure 0.2</P>
						<ul class="main-bd">
							<LH>Customer User Interface Breakdown: Stock Search</LH>
							<p><b>1</b>: Input box for searching the stocks</p>
							<p><b>2</b>: List of matched stocks</p>
						</ul>
					</div>
				</div>
				<div class="manual-section" id="currentstock">
					<div class="scrtion-header">
						<p class="real-title">
							How to view current stocks holding.
						</p>
					</div>
					<div class="list-content">
						<p>1. Click on <b>Your Accounts</b> (2 on <a href="#figure-00">Figure 0.0</a>), and now you should be presented with a similar screen as in <a href="#figure-01">Figure 0.1</a></p>
						<p>2. Click on the any account from the list to select it. (1 on Figure 0.1)</p>
						<p>3. The list of all stock holdings will be displayed under <b>Current Account Holdings</b>. (2 on Figure 0.1)</p>
					</div>
				</div>
				<div class="manual-section" id="currentpastorder">
					<div class="scrtion-header">
						<p class="real-title">
							How to view current/past stock orders
						</p>
					</div>
					<div class="list-content">
						<p>1. Click on <b>Your Accounts</b> (2 on <a href="#figure-00">Figure 0.0</a>), and now you should be presented with a similar screen as in <a href="#figure-01">Figure 0.1</a></p>
						<p>2. Click on the any account from the list to select it. (1 on Figure 0.1)</p>
						<p>3. The list of all stock holdings will be displayed under <b>CAccount Orders</b>. (3 on Figure 0.1)</p>
					</div>
				</div>
				<div class="manual-section" id="orderdetail">
					<div class="scrtion-header">
						<p class="real-title">
							How to view current/past stock orders
						</p>
					</div>
					<div class="list-content">
						<p>1. Click on <b>Your Accounts</b> (2 on <a href="#figure-00">Figure 0.0</a>), and now you should be presented with a similar screen as in <a href="#figure-01">Figure 0.1</a></p>
						<p>2. Click on the any account from the list to select it. (1 on Figure 0.1)</p>
						<p>3. The list of all stock holdings will be displayed under <b>Account Orders</b>. (3 on Figure 0.1)</p>
						<p>4. Now click on any stock from the list, and its order detail will be displayed under <b>Order Details</b>. (4 on Figure 0.1)</p>
					</div>
				</div>
				<div class="manual-section" id="stocksearch">
					<div class="scrtion-header">
						<p class="real-title">
							How to Search Stock
						</p>
					</div>
					<div class="list-content">
						<p>1. Click on <b>Stock Lookup</b> (3 on <a href="#figure-00">Figure 0.0</a>), and now you should be presented with a similar screen as in <a href="#figure-02">Figure 0.2</a></p>
						<p>2. Type in the stock symbol into the search box and hit <b>Search</b>. You can search multilple stocks at the same time. (1 on Figure 0.2)</p>
					</div>
					<div class="scrtion-header">
						<p class="real-title">
							How to View Stock's Price History
						</p>
					</div>
					<div class="list-content">
						<p>1. Click on <b>Stock Lookup</b> (3 on <a href="#figure-00">Figure 0.0</a>), and now you should be presented with a similar screen as in <a href="#figure-02">Figure 0.2</a></p>
						<p>2. Type in the stock symbol into the search box and hit <b>Search</b>. You can search multilple stocks at the same time. (1 on Figure 0.2)</p>
						<p>3. Click on any of the stock in the list to view a graph of its price history, (2 on Figure 0.2), and you will be presented with something similar to following:</p>
						<img src="stock-price.jpg"></img>
						<p class="figure">Figure 0.3</P>
					</div>
				</div>
			</div>
		</div>
		<div class="bot"></div>
	</div>
	<div class="bot"></div>
</body>
</html>